<template>
	<view class="background" ref="background">
		<page-head :title="title"></page-head>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="text-box" scroll-y="true">
			<text>{{ textcai }} </text>
			</view>
			<view class="uni-btn-v">
				<!--  -->
				<!-- <button type="primary" :disabled="!canAdd" @click="getRandomFoodadd2">整个主食</button> -->
				  <button  class="button"
				    type="primary"
				    :disabled="!canAdd"
				    @click="toggleButtonText"
				  >
				    {{ buttonText }}
				  </button>
				  <button type="primary" @click="accept">点击订阅，人工智能告诉你吃啥</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { saveOpenId } from '../../api/indexPage';
	import data from '@/static/json/data.json';
	import register from '@/api/indexPage/indexMysql.js';
	export default {
			data() {
			  return {
				title: 'text',
				text: '',
				textcai: '',
				textzhushi:'',
				canRemove: false,
				texts: data,
				buttonText: '开始随机', // 按钮的初始文本
				canAdd: true, // 控制按钮是否可用
				words: ["你好", "Vue", "JavaScript", "Moonshot AI", "Kimi"],
				extraLine: [],
				randomTimer: null,
				intervalId: null
			  }
			},
			methods: {
				 toggleButtonText() {
				      if (this.buttonText === '开始随机') {
						this.buttonText = '暂停' ;
						this.randomTimer = setInterval(() => {
						          var index = Math.floor(Math.random() * data.zhushi.length);
						          this.textzhushi = data.zhushi[index];
								  var index = Math.floor(Math.random() * data.cai.length);
								  this.textcai = data.cai[index];
						        }, 50); // 每100毫秒更新一次
				      } else{
						  // 获取数组的长度
						  clearInterval(this.randomTimer);
						  var index = Math.floor(Math.random() * data.zhushi.length);
						  // 随机选择一个元素
						  this.textzhushi = data.zhushi[index];
						  
						  var index = Math.floor(Math.random() * data.cai.length);
						  this.textcai = data.cai[index];
						this.buttonText = '开始随机';  
					  }
				},
				accept() {
					uni.requestSubscribeMessage({
					 tmplIds: ['7D0reKnOahBzBPA7425eMSvoaGwMGPAl231IT3lKmqY'],
					  success (res) {
						  console.log(res);
					  }
					})
				wx.login({
						success: res => {
							if (res.code) {
								saveOpenId(res.code).then(res => {
								   	console.log(res)
									wx.showToast({
										title: '订阅成功',
										icon: 'success',
										duration: 2000//持续的时间
									})
								})
							}  
					} })

				},
			},
			beforeDestroy() {
			  // 组件销毁前清除定时器
			  if (this.randomTimer) {
			    clearInterval(this.randomTimer);
			  }
			}
		  }
</script>

<style>
	.text-box {
		margin-bottom: 40rpx;
		padding: 40rpx 0;
		display: flex;
		min-height: 300rpx;
		background-color: #FFFFFF;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 30rpx;
		color: #353535;
		line-height: 1.8;
	}
  .text {
    font-size: 15px;
    color: #353535;
    line-height: 27px;
    text-align: center;
  }
  
  .uni-padding-wrap{
  	/* width:690rpx; */
  	padding:0 30rpx;
  }
  .uni-common-mt{
  	margin-top:400rpx;
  }
  .uni-btn-v{
  	padding:10rpx 0;
  }
  .uni-btn-v button{margin:20rpx 0;}
.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  outline: none;
}

.button:hover {
  background: linear-gradient(to right, #5a0fc8 0%, #206ff7 100%);
}

.button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .button {
    padding: 8px 16px;
    font-size: 14px;
  }
}

.background {
  background-color: #D2B48C; /* 淡棕色背景 */
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
/* 动画效果 */
@keyframes fade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}
/* 添加一些背景图案 */
.background::before {
  content: '';
  /* background-image: url('path-to-your-pattern-image.png'); */
  opacity: 0.2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: repeat;
}
</style>

